<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4" xmlns:sec="http://www.w3.org/1999/xhtml">>

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <title>在线考试系统</title>
    <meta content="" name="descriptison">
    <meta content="" name="keywords">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

    <!-- Vendor CSS Files -->
    <link th:href="@{/static/front/assets/vendor/bootstrap/css/bootstrap.min.css}"  rel="stylesheet">
    <link th:href="@{/static/front/assets/vendor/icofont/icofont.min.css}"  rel="stylesheet">
    <link th:href="@{/static/front/assets/vendor/boxicons/css/boxicons.min.css}"  rel="stylesheet">
    <link th:href="@{/static/front/assets/vendor/animate.css/animate.min.css}"  rel="stylesheet">
    <link th:href="@{/static/front/assets/vendor/remixicon/remixicon.css}"  rel="stylesheet">
    <link th:href="@{/static/front/assets/vendor/owl.carousel/assets/owl.carousel.min.css}"  rel="stylesheet">
    <link th:href="@{/static/front/assets/vendor/venobox/venobox.css}"  rel="stylesheet">
    <link th:href="@{/static/front/assets/vendor/aos/aos.css}"  rel="stylesheet">

    <!-- Template Main CSS File -->
    <link th:href="@{/static/front/assets/css/style.css}"  rel="stylesheet">
    <!--对话框-->
    <link rel="stylesheet" th:href="@{/static/js/jconfirm/jquery-confirm.min.css}">

</head>

<body>
<!-- ======= Header ======= -->
<header id="header" class="fixed-top ">
    <div class="container d-flex align-items-center">

        <h1 class="logo mr-auto"><a href="#header" class="scrollto">在线考试网</a></h1>

        <nav class="nav-menu d-none d-lg-block">
            <ul>
                <li class="active"><a href="#header">首页</a></li>
                <li><a href="#about">关于我们</a></li>
                <li th:if="${session.stuUser == null}"><a href="/Front/login">登录</a></li>
                <li th:if="${session.stuUser != null}"><a href="/StuUser/logOut">退出</a></li>
            </ul>
        </nav><!-- .nav-menu -->

    </div>
</header><!-- End Header -->

<!-- ======= Hero Section ======= -->
<section id="hero" style="height: 500px" class="d-flex justify-cntent-center align-items-center">
    <div id="heroCarousel" class="container carousel carousel-fade" data-ride="carousel">

        <!-- Slide 1 -->
        <div class="carousel-item active">
            <div class="carousel-container">
                <h2 class="animated fadeInDown" th:text="${examPapersVO.name}"></h2>
                <p class="animated fadeInUp"></p>
            </div>
        </div>

        <a class="carousel-control-prev" href="#heroCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon bx bx-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>

        <a class="carousel-control-next" href="#heroCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon bx bx-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>

    </div>
</section><!-- End Hero -->
<main class="coder-layout-content" style="margin-top: 100px">

    <div class="container-fluid" >
        <form id="examPaperForm" method="post" >
            <p id="countDown" style="text-align: center;color:red;font-size: 30px;"></p>
            <input type="hidden" id="paperId" name="paperId" th:value="${examPapersVO.id}">
            <!-- 选择题start-->
            <div th:each="questionVo,questionVoStat : ${examPapersVO.questions}">
                <div class="row" th:if="${questionVo.typeId} eq '1'">
                    <div class="col-md-2">
                    </div>
                    <div class="col-md-8 card" >
                        <div >

                            <div class="card-body">
                                <div class="form-group">
                                    <label class="col-xs-12">
                                        <span th:text="${questionVoStat.count}"></span>
                                        <span th:text="${questionVo.questionTitle}"></span>
                                        ( <span th:text="${questionVo.score}"></span>分)
                                    </label>
                                    <div class="col-xs-12">
                                        <!-- 问题的标题和正确答案-->
                                        <input type="hidden"  th:name="'questionTitle_'+${questionVo.id}" th:value="${questionVo.questionTitle}">
                                        <input type="hidden"  th:name="'questionType_'+${questionVo.id}" th:value="${questionVo.typeId}">
                                        <input type="hidden"  th:name="'questionScore_'+${questionVo.id}" th:value="${questionVo.score}">
                                        <input type="hidden"  th:name="'correntAnswer_'+${questionVo.id}" th:value="${questionVo.questionAnswer}">
                                        <div class="radio">
                                            <label for="xtzOptionsA">
                                                <input type="radio" id="xtzOptionsA" th:name="'questionAnswer_'+${questionVo.id}" value="A">
                                                <span th:text="${questionVo.questionOptions.optionA}"></span>
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label for="xtzOptionsB">
                                                <input type="radio" id="xtzOptionsB" th:name="'questionAnswer_'+${questionVo.id}" value="B">
                                                <span th:text="${questionVo.questionOptions.optionB}"></span>
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label for="xtzOptionsC">
                                                <input type="radio" id="xtzOptionsC" th:name="'questionAnswer_'+${questionVo.id}" value="C">
                                                <span th:text="${questionVo.questionOptions.optionC}"></span>
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label for="xtzOptionsD">
                                                <input type="radio" id="xtzOptionsD" th:name="'questionAnswer_'+${questionVo.id}" value="D">
                                                <span th:text="${questionVo.questionOptions.optionD}"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                    </div>
                </div>
                <!-- 选择题end-->
                <!-- 填空题start-->
                <div class="row" th:if="${questionVo.typeId} eq '2'">
                    <div class="col-md-2">
                    </div>
                    <div class="col-md-8 card" >
                        <div >
                            <div class="card-body">
                                <div class="form-group">
                                    <label class="col-xs-12">
                                        <span th:text="${questionVoStat.count}"></span>
                                        <span th:text="${questionVo.questionTitle}"></span>
                                        ( <span th:text="${questionVo.score}"></span>分)
                                    </label>

                                    <div class="col-xs-12" style="margin-bottom: 20px">
                                        <!-- 问题的分数和正确答案-->
                                        <input type="hidden"  th:name="'questionTitle_'+${questionVo.id}" th:value="${questionVo.questionTitle}">
                                        <input type="hidden"  th:name="'questionType_'+${questionVo.id}" th:value="${questionVo.typeId}">
                                        <input type="hidden"  th:name="'questionScore_'+${questionVo.id}" th:value="${questionVo.score}">
                                        <input type="hidden"  th:name="'correntAnswer_'+${questionVo.id}" th:value="${questionVo.questionAnswer}">

                                        <input class="form-control" type="text" th:name="'questionAnswer_'+${questionVo.id}"  placeholder="请输入您答案..">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                    </div>
                </div>

                <!-- 填空题end-->
                <!-- 判断题start-->

                <div class="row" th:if="${questionVo.typeId} eq '3'">
                    <div class="col-md-2">
                    </div>
                    <div class="col-md-8 card" >
                        <div >

                            <div class="card-body">
                                <div class="form-group">
                                    <label class="col-xs-12">
                                        <span th:text="${questionVoStat.count}"></span>
                                        <span th:text="${questionVo.questionTitle}"></span>
                                        ( <span th:text="${questionVo.score}"></span>分)
                                    </label>
                                    <div class="col-xs-12" style="margin-bottom: 20px">
                                        <!-- 问题的分数和正确答案-->
                                        <input type="hidden"  th:name="'questionTitle_'+${questionVo.id}" th:value="${questionVo.questionTitle}">
                                        <input type="hidden"  th:name="'questionType_'+${questionVo.id}" th:value="${questionVo.typeId}">
                                        <input type="hidden"  th:name="'questionScore_'+${questionVo.id}" th:value="${questionVo.score}">
                                        <input type="hidden"  th:name="'correntAnswer_'+${questionVo.id}" th:value="${questionVo.questionAnswer}">

                                        <input type="radio"   th:name="'questionAnswer_'+${questionVo.id}" value="1">正确
                                        <input type="radio"   th:name="'questionAnswer_'+${questionVo.id}" value="0">错误
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                    </div>
                </div>

                <!-- 判断题end-->
                <!-- 简答题start-->

                <div class="row" th:if="${questionVo.typeId} eq '4'">
                    <div class="col-md-2">
                    </div>
                    <div class="col-md-8 card" >
                        <div >

                            <div class="card-body">
                                <div class="form-group">
                                    <label class="col-xs-12">
                                        <span th:text="${questionVoStat.count}"></span>
                                        <span th:text="${questionVo.questionTitle}"></span>
                                        ( <span th:text="${questionVo.score}"></span>分)
                                    </label>
                                    <div class="col-xs-12" style="margin-bottom: 20px">
                                        <!-- 问题的分数和正确答案-->
                                        <input type="hidden"  th:name="'questionTitle_'+${questionVo.id}" th:value="${questionVo.questionTitle}">
                                        <input type="hidden"  th:name="'questionType_'+${questionVo.id}" th:value="${questionVo.typeId}">
                                        <input type="hidden"  th:name="'questionScore_'+${questionVo.id}" th:value="${questionVo.score}">
                                        <input type="hidden"  th:name="'correntAnswer_'+${questionVo.id}" th:value="${questionVo.questionAnswer}">

                                        <textarea class="form-control" th:name="'questionAnswer_'+${questionVo.id}" rows="6"
                                                  placeholder="内容.."></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                    </div>
                </div>
            </div>
            <!-- 简答题end-->
            <!-- 提交按钮start-->
            <div class="row">
                <div class="col-md-2">
                </div>
                <div class="col-md-8 card" >
                    <div class="card-body">
                        <div class="form-group">
                            <div class="col-xs-12" style="margin-bottom: 20px;text-align: center">
                                <button class="btn btn-primary" type="button" data-method='saveExam'>确认提交</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                </div>
            </div>
            <!-- 提交按钮end-->
        </form>
    </div>

</main>
<!-- ======= Footer ======= -->
<footer id="footer">

    <div class="footer-newsletter">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <h4></h4>
                    <p></p>
                </div>
                <div class="col-lg-6">

                </div>
            </div>
        </div>
    </div>

    <div class="footer-top">
        <div class="container">
            <div class="row">

                <div class="col-lg-4 col-md-6 footer-links">
                    <h4>用户连接</h4>
                    <ul>
                        <li><i class="bx bx-chevron-right"></i> <a href="#">在线测试网</a></li>
                        <li><i class="bx bx-chevron-right"></i> <a href="#">项目分享圈</a></li>
                        <li><i class="bx bx-chevron-right"></i> <a href="#">管理系统</a></li>
                    </ul>
                </div>

                <div class="col-lg-4 col-md-6 footer-links">
                    <h4>我们理念</h4>
                    <ul>
                        <li>开放</li>
                        <li>创新</li>
                        <li>共赢</li>
                    </ul>
                </div>

                <div class="col-lg-4 col-md-6 footer-links">
                    <h4>联系方式</h4>
                    <ul>
                        <li>QQ:3393857689</li>
                        <li>email:3393857689@qq.com</li>
                        <li>tel:10000</li>
                    </ul>
                </div>



            </div>
        </div>
    </div>

    <div class="container">
        <div class="copyright">
            &copy; Copyright <strong><span>xxx</span></strong>. All Rights Reserved
        </div>

    </div>
</footer><!-- End Footer -->

<a href="#" class="back-to-top"><i class="ri-arrow-up-line"></i></a>
<div id="preloader"></div>


<!-- Vendor JS Files -->
<script th:src="@{/static/front/assets/vendor/jquery/jquery.min.js}"></script>
<script th:src="@{/static/front/assets/vendor/bootstrap/js/bootstrap.bundle.min.js}" ></script>
<script th:src="@{/static/front/assets/vendor/jquery.easing/jquery.easing.min.js}" ></script>
<script th:src="@{/static/front/assets/vendor/php-email-form/validate.js}" ></script>
<script th:src="@{/static/front/assets/vendor/owl.carousel/owl.carousel.min.js}"></script>
<script th:src="@{/static/front/assets/vendor/venobox/venobox.min.js}"></script>
<script th:src="@{/static/front/assets/vendor/isotope-layout/isotope.pkgd.min.js}"></script>
<script th:src="@{/static/front/assets/vendor/aos/aos.js}"></script>

<script type="text/javascript"  th:src="@{/static/js/jconfirm/jquery-confirm.min.js}"></script>
<script type="text/javascript"  th:src="@{/static/js/jquery.serialize-object.min.js}"></script>

<!-- Template Main JS File -->
<script th:src="@{/static/front/assets/js/main.js}"></script>
<script type="text/javascript" th:inline="javascript">
    var ctxPath = [[${#httpServletRequest.getContextPath()}]];
    function examPaper(paperId){
        window.location.href=ctxPath+"/exam/popPaper?paperId="+paperId;
    }
    $(function(){

        //绑定事件
        $("button,a").on('click',function(){
            //获取到 a标签里面配置 data-method
            var methodName = $(this).data('method');
            if(methodName){
                doMethod[methodName]();
            }
        });


        var doMethod={
            saveExam(){
                //保存表单
                var examformObj =  $("#examPaperForm").serializeObject();
                /**
                 paperId---10014

                 questionTite_167 ---xxx
                 questionTpye_167---1 2
                 questionScore_167---5
                 correntAnswer_167---D
                 questionAnswer_167---B


                 questionTite_166 --ttt
                 questionTpye_166---2
                 questionScore_166---20
                 correntAnswer_166---
                 questionAnswer_166---嘻嘻嘻嘻

                 需要参数格式 [{paperId:xxx,questionId:165,questionAnswer:A,questionScore:5,correntAnswer:D}]
                 */
                var stuUser = [[${session.stuUser}]];
                var stuId = stuUser.id;
                var paperId = examformObj.paperId;
                //删除属性
                delete examformObj.paperId;
                var count=1;
                var examPaperArr=[];
                var tempObj ={}
                //组装参数
                for(var key in examformObj){

                    //第一次循环 取到问题标题
                    if(count==1){
                        tempObj.stuId = stuId;//学生id
                        tempObj.paperId=paperId;//试卷id
                        tempObj.questionTitle = examformObj[key];
                    }
                    //第二次循环 取到问题类型
                    if(count==2){
                        tempObj.typeId = examformObj[key];
                    }
                    //第三次循环 取到问题类型
                    if(count==3){
                        tempObj.questionId = key.split("_")[1];//问题id
                        //问题分数
                        tempObj.questionScore=examformObj[key]
                    }
                    if(count == 4){
                        //问题正确答案
                        tempObj.correntAnswer = examformObj[key]
                    }
                    if(count == 5){
                        //问题填写答案 correntAnswer questionAnswer
                        tempObj.questionAnswer = examformObj[key];
                        if(tempObj.questionAnswer == tempObj.correntAnswer){
                            tempObj.correntScore = tempObj.questionScore;
                        }else{
                            tempObj.correntScore = 0;
                        }
                        count = 0;
                        examPaperArr.push(tempObj);
                        tempObj={};
                    }
                    count++;
                }
                console.log(examPaperArr);
                $.ajax({
                    url: ctxPath+"/Exam/stu/examPaper",
                    async: false,
                    type: "POST",
                    data:JSON.stringify(examPaperArr),
                    dataType: "json",
                    contentType:"application/json",
                    success: function ( resp ) {
                        let ret = resp.result;
                        clearInterval(examTimer);
                        if ( ret=='success' ) {
                            $.confirm({
                                title: '温馨提示',
                                content: '提交成功，考试成绩3日之后等待老师批阅之后,方可查询',
                                type: 'green',
                                buttons: {
                                    confirm: {
                                        text: '确认',
                                        action: function(){
                                            window.location.href = ctxPath+"/Front/index"
                                        }
                                    },
                                    cancel: {
                                        text: '关闭'
                                    }
                                }
                            });
                        } else if ("403" == data) {

                        }
                    }
                });

            }
        }


        //自动提交处理
        //examPapersVO 取到当前结束试卷，如果当前时间 等于结束时间，就自动提交试卷 --采用定时器
        var examPapersVO = [[${examPapersVO}]];
        //考试结束时间
        var endTime =  new Date(examPapersVO.endTime);
        var afterFiveDate = new Date(endTime .getTime() - 300000);

        //添加定时器
        var examTimer =   setInterval(autoCommit,1000)
        //自动提交方法
        function autoCommit(){
            var currentTime =  new Date();
            //考试剩余时间 300
            var lefttime = parseInt((endTime.getTime() - currentTime.getTime()) / 1000);
            var d = parseInt(lefttime / (24*60*60))
            var h = parseInt(lefttime / (60 * 60) % 24);
            var m = parseInt(lefttime / 60 % 60);
            var s = parseInt(lefttime % 60);
            d = addZero(d)
            h = addZero(h);
            m = addZero(m);
            s = addZero(s);
            let str = `离考试结束还剩余:  ${d}天 ${h} 时 ${m} 分 ${s} 秒`;
            $("#countDown").html(str);
            if (lefttime <= 0) {
                $("#countDown").html("考试已结束");
            }

            if(currentTime >= endTime) {
                doMethod.saveExam();
                //清楚定时器
                $.confirm({
                    title: '温馨提示',
                    content: '时间已到,考试已经结束!',
                    type: 'green',
                    buttons: {
                        confirm: {
                            text: '确认'
                        },
                        cancel: {
                            text: '关闭'
                        }
                    }
                });

            }
            if(currentTime == afterFiveDate) {
                $.confirm({
                    title: '温馨提示',
                    content: '离考试结束还有5分钟!',
                    type: 'green',
                    buttons: {
                        confirm: {
                            text: '确认'
                        },
                        cancel: {
                            text: '关闭'
                        }
                    }
                });
            }
        }


        function addZero(i) {
            return i < 10 ? "0" + i: i + "";
        }


    })


</script>

<script th:inline="javascript">


</script>

</body>

</html>